<template>
    <div>
        <Dialog v-model="dialogVisible1" title="未通过通知" width="520">
            <div class="message_p">
                <el-form ref="ruleFormRef" :model="state.form" :rules="rules" label-width="120px" label-position="top">
                    <el-form-item label="内容1" prop="alltime">
                        <el-input v-model="state.form.alltime" placeholder="请输入" type="textarea" />
                    </el-form-item>
                    <el-form-item label="内容2" prop="name">
                        <el-input v-model="state.form.name" placeholder="请输入" type="textarea" />
                    </el-form-item>
                    <el-form-item label="短信通知内容" prop="notices">
                        <el-input v-model="state.form.notices" disabled :autosize="{ minRows: 2 }" type="textarea"
                            placeholder="短信通知内容" />
                    </el-form-item>
                    <div class="flex jcfe aic" style="width: 100%;">
                        <el-button @click="DialogClose()">取消</el-button>
                        <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
                    </div>
                </el-form>
            </div>
        </Dialog>
    </div>
</template>
<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import { ref, reactive, watch } from 'vue'
import { Dialog } from '@/components/Dialog'
import { ElButton } from 'element-plus'
const dialogVisible1 = ref(false)
const loading = ref(false)
const emit = defineEmits(['penClick'])
const props = defineProps({
    penData: {
        type: Object,
        default: () => {
            return {}
        }
    }

})
interface RuleForm {
    alltime: string
    name: string
}
const ruleFormRef = ref<FormInstance>()
    const validateInputContent = (rule, value, callback) => {
    const regs = /^[^\s]*$/;  //空格 
    if (value === '') {
        callback(new Error('请输入内容'));
    } else if (!regs.test(value)) {
        callback(new Error('支持中文、英文、数字、符号'));
    } else {
        callback();
    }
};
const rules = reactive<FormRules<RuleForm>>({
    alltime: [{ required: true, message: '必填字段', trigger: 'blur' },
    { min: 1, max: 150, message: '长度限制1~150', trigger: 'blur' }, { validator: validateInputContent, trigger: 'blur' },
    ],
    name: [{ required: true, message: '必填字段', trigger: 'blur' },
    { min: 1, max: 150, message: '长度限制1~150', trigger: 'blur' }, { validator: validateInputContent, trigger: 'blur' },]
})
const state = reactive({
    // notices1:"您好：现邀请您于____参加____的笔试，具体安排如下：1、签到时间：____ - ____；2、笔试时间：____ - ____（考试时间开始后，迟到____分钟者，不予进入考场）；3、地点：____；4、需携带的资料：____。",
    // notices2:"您好：现邀请您于____参加____的笔试，具体安排如下：1、签到时间：____ - ____；2、笔试时间：____ - ____（考试时间开始后，迟到____分钟者，不予进入考场）；3、地点：____；4、需携带的资料：____。收到短信后，务必于____前进行回复，参加请回复1，放弃请回复2。退订请回复R。",
    form: {
        alltime: "",//时间
        qdtime: [],//签到时间
        kstime: [],//考试时间
        ziliao: "",//资料
        hftime: "",//回复
        name: "",//名称
        jztime: "",//截至时间
        location: "",//笔试地点
        notices: "",
    } as any,
    checked: false,
    ruleForm: ["____", "____"]
})
watch(() => state.checked, (newValue, oldValue) => {
    console.log("checked", state.checked);
    state.form.hftime = ""
    if (newValue) {
        state.ruleForm.push("____")
    } else {
        state.ruleForm.pop()
    }
    if (newValue) {
        state.form.notices = `您好：经过${state.ruleForm[0]},${state.ruleForm[1]}，如有机会，期盼下次再与您合作，为不耽误您的宝贵时间，特此通知，冒昧之处请见谅。 `
    } else {
        state.form.notices = `您好：经过${state.ruleForm[0]},${state.ruleForm[1]}，如有机会，期盼下次再与您合作，为不耽误您的宝贵时间，特此通知，冒昧之处请见谅。 `
    }
}, { deep: true })
watch(() => state.form, (newValue, oldValue) => {
    console.log("数据监听----", newValue);
    let obj = newValue
    if (obj.alltime) {
        state.ruleForm[0] = obj.alltime
    }
    if (obj.name) {
        state.ruleForm[1] = obj.name
    }

    if (state.checked) {
        state.form.notices = `您好：经过${state.ruleForm[0]},${state.ruleForm[1]}，如有机会，期盼下次再与您合作，为不耽误您的宝贵时间，特此通知，冒昧之处请见谅。 `
    } else {
        state.form.notices = `您好：经过${state.ruleForm[0]},${state.ruleForm[1]}，如有机会，期盼下次再与您合作，为不耽误您的宝贵时间，特此通知，冒昧之处请见谅。 `
    }

}, {
    deep: true, // 深度监听对象的变化（如果 count 是一个对象的话）  
});
const DialogOpen = () => {
    state.form = {
        notices: `您好：经过______,_______，如有机会，期盼下次再与您合作，为不耽误您的宝贵时间，特此通知，冒昧之处请见谅。 `
    }
    state.checked = false
    dialogVisible1.value = true
}
const DialogClose = () => {
    dialogVisible1.value = false
}

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            let obj = {
                logName: state.checked ? "未通过短信回复" : "告知未通过模板",
                content: state.form.notices,
                param: state.ruleForm,
                templateId: state.checked ? "feb9d03ac978489c920beb87954f890e" : "25e057b3c0af4b2299a83f3b3fb23061"
            }
            emit('penClick', obj)
        } else {
            console.log('error submit!', fields)
        }
    })
}
// 暴露方法
defineExpose({
    DialogOpen,
    DialogClose
})
</script>
<style lang="less">
.el-dialog__header {
    padding: 10px;
    border-bottom: 1px solid #D8D8D8;
}

.el-dialog__body {
    // padding: 20px;
    // visibility: hidden;

}
</style>
<style lang="less" scoped>
.message_p {
    overflow: hidden;
    padding: 0px 10px 20px 10px;
}

.el-button {
    margin-top: 20px;
    width: 134px;
    height: 40px;
}
</style>